<template>
  <div>
    <el-dialog
      v-model="dialogVisible"
      title="文件上传"
      width="20%"
      :before-close="handleClose"
    >
      <el-upload
        v-model:file-list="fileList"
        class="avatar-uploader"
        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
        multiple
        :on-preview="handlePreview"
        :limit="1"
        :on-exceed="handleExceed"
        :before-upload="handleBeforeUpload"
      >
        <div class="Plus">
          <el-icon><Plus /></el-icon>
        </div>
      </el-upload>
      <div>仅支持上传文件格式为“.pptx”的文件</div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, defineEmits } from "vue";
import { ElMessage } from "element-plus";
const emits = defineEmits(["closeDialog"]);
let dialogVisible = true;
let fileType = ["pptx"];
let data = reactive({
  fileList: [],
});
let fileList = data.fileList;
const handlePreview = (file) => {
  console.log(file);
};
const handleExceed = (files, fileList) => {
  console.log(files, fileList);
};
const handleBeforeUpload = (file) => {
  // 校检文件类型
  if (fileType.length) {
    const fileName = file.name.split(".");
    const fileExt = fileName[fileName.length - 1];
    const isTypeOk = fileType.indexOf(fileExt) >= 0;
    if (!isTypeOk) {
      ElMessage.error(`文件格式不正确, 请上传${fileType.join("/")}格式文件!`);
      return false;
    }
  }
  //   // 校检文件大小
  //   if (props.fileSize) {
  //     const isLt = file.size / 1024 / 1024 < props.fileSize;
  //     if (!isLt) {
  //       proxy.$modal.msgError(`上传文件大小不能超过 ${props.fileSize} MB!`);
  //       return false;
  //     }
  //   }
  //   proxy.$modal.loading("正在上传文件，请稍候...");
  //   number.value++;
  return true;
};

function handleClose() {
  emits("closeDialog");
}
</script>

<style>
.Plus {
  width: 200px;
  height: 200px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 28px;
  color: #8c939d;
}
</style>
